import { forwardRef, useImperativeHandle, useState } from 'react'

import {
    Modal,
    Form,
    Input,
    Radio,
    Select,
    Switch,
} from 'antd';
import { menuadd, menuedit, menuinfo } from '../../request/app'

const App = forwardRef((props, ref) => {
    const [editid, setid] = useState(0)
    const [value, setvalue] = useState(0)
    // 创建form数据表单
    const [form] = Form.useForm();
    // 表单验证失败的函数
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    useImperativeHandle(ref, () => ({
        // 暴露给父组件的方法
        lookup(id) {
            // console.log('回显');
            setid(id)
            menuinfo({
                id
            })
                .then(res => {
                    // console.log(res,'回显数据');
                    form.setFieldsValue(res.list)
                })

        }
    }));
    function reset(){
        form.resetFields()
    }

    // 表单验证成功的函数
    const onFinish = (values) => {
        // console.log('Success:', values);
        if (values.status) {
            values.status = 1
        } else {
            values.status = 2
        }

        if (props.isedit) {
            // console.log(title);
            // console.log("修改菜单确定");
            menuedit({
                ...values,
                id: editid
            })
                .then(res => {
                    // console.log(res);
                    if (res.code == 200) {
                        props.shoplist()
                        props.unadd()
                        reset()
                    }

                })
        } else {
            menuadd(values)
                .then(res => {
                    // console.log(res);
                    if (res.code == 200) {
                        props.shoplist()
                        props.unadd()
                        reset()
                    }

                })

        }

    };
    // console.log(props.data);
    function cancle(){
        props.unadd()
        reset()
    }
    function changepid(e){
        console.log(e,'1111111111');
        if(e==0){
            // form.initialValue()
            form.setFieldsValue({'type':1})
            setvalue(1)
            
        }else{
            // form.initialValue()

            setvalue(2)
            form.setFieldsValue({'type':2})
        }
    }
    // function changetype(e){
    //     console.log(e,'1111111111');
    //     if(e==0){
    //         // form.initialValue()
    //         form.setFieldsValue({'type':1})
            
    //     }else{
    //         // form.initialValue()
    //         form.setFieldsValue({'type':2})
    //     }
    // }


    return (
        <Modal title={props.isedit ? '修改菜单' : '添加菜单'} visible={props.isadd} onOk={form.submit} onCancel={cancle}>
            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                form={form}
            >
                <Form.Item
                    label="菜单名称"
                    name="title"
                    rules={[
                        {
                            required: true,
                            message: '请输入您的账号',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item label="上级菜单" 
                    name="pid"
                    rules={[
                        {
                            required: true,
                            message: '请选择上级菜单',
                        },
                    ]}
                >
                    <Select onChange={changepid}>
                        <Select.Option value={0}>顶级菜单</Select.Option>
                        {
                            props.data.map(item => {
                                return <Select.Option value={item.id} key={item.key}>{item.title}</Select.Option>
                            })
                        }

                    </Select>
                </Form.Item>
                <Form.Item name="type" initialValue={1} label="菜单类型">
                    <Radio.Group >
                        <Radio disabled value={1}>目录</Radio>
                        <Radio disabled value={2}>菜单</Radio>
                    </Radio.Group>
                </Form.Item>

               {
                value==2?<Form.Item label="菜单地址" initialValue='' name="url">
                    <Input />
                </Form.Item>:<Form.Item label="菜单图标" initialValue='' name="icon">
                    <Input />
                </Form.Item>
               } 
                
                <Form.Item label="状态" initialValue={1} name="status" valuePropName="checked">
                    <Switch />
                </Form.Item>
            </Form>
        </Modal>
    );
});

export default App;